<template>
  <div class="mui-content mh-containe pd">
    <mh-header headName="消息" :showBack="showBack"> </mh-header>
    <div class="mui-segmented-control mh-segmented sub-control">
      <a class="mui-control-item mui-active" href="javascript:" @click='getData(1)'>全部
        <!-- <span class="mui-badge mui-badge-danger unread">5</span> -->
      </a>
      <a class="mui-control-item" href="javascript:" @click='getData(2)'>红娘</a>
      <a class="mui-control-item" href="javascript:" @click='getData(3)'>相亲</a>
      <a class="mui-control-item" href="javascript:" @click='getData(4)'>购物</a>
      <a class="mui-control-item" href="javascript:" @click='getData(5)'>备注</a>
    </div>
    <div class="msg-list">
      <div class="msg-item flex-bt" v-for="item in msgList" :key="item.id" @tap="toMsg(item.msgType,item.name, item.id)">
        <div class="msg-info flex">
          <img class="msg-avatar" :src="item.ico" alt="">
          <div>
            <p class="mui-ellipsis msg-name" v-text="item.name">-</p>
            <p class="mui-ellipsis" v-text="item.content">-</p>
          </div>
        </div>
        <div class="msg-sub-info mui-text-right" v-if="item.msgType === 1">
          <p class="msg-time" v-text="item.time">0:00</p>
          <p>
            <!-- <span class="mui-badge mui-badge-danger">5</span> -->
          </p>
        </div>
        <div class="msg-sub-info mui-text-right" v-if="item.msgType === 2">
          <span class="adv-badge">广告</span>
        </div>
        <div class="msg-sub-info mui-text-right" v-if="item.msgType === 3">
          <p class="msg-time" v-text="item.time">0:00</p>
        </div>
      </div>
    </div>
    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import TabMenu from '@/components/tab-menu/hn-tab'
  export default {
    name: "explore",
    data () {
      return {
        activeFootTab: 2,
        showBack: false,
        msgList: [
          // {
          //   id: '1',
          //   name: '聊天测试',
          //   time: '15:30',
          //   content: '123',
          //   msgs: 5,
          //   msgType: 1,
          //   ico: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJKpp1HCnDWb1TI4zG7mvIYoHjotHJGdTM7dpkACGfueIfQYIBvnCFHQqLca7l3HFHUQCbNARGqdA/132'
          // },
          // {
          //   id: '2',
          //   name: '丘比特2',
          //   time: '15:30',
          //   content: '帮您预约过了',
          //   msgs: 5,
          //   msgType: 1,
          //   ico: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925093698,3746283339&fm=11&gp=0.jpg'
          // },
          // {
          //   id: '3',
          //   name: '丘比特3',
          //   time: '15:30',
          //   content: '帮您预约过了',
          //   msgs: 5,
          //   msgType: 1,
          //   ico: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=346133432,1183110936&fm=11&gp=0.jpg'
          // },
          // {
          //   id: '4',
          //   name: '京东母婴馆',
          //   time: '15:30',
          //   content: '最低价秒杀，不容错过',
          //   msgs: 5,
          //   msgType: 2,
          //   ico: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2922300494,2308232913&fm=26&gp=0.jpg'
          // },
          // {
          //   id: '5',
          //   name: '相亲订单提示',
          //   time: '15:30',
          //   content: '已订购',
          //   msgs: 5,
          //   msgType: 3,
          //   ico: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3923503081,1471794006&fm=11&gp=0.jpg'
          // }
        ]
      }
    },
    methods: {
      toMsg (type, name, id) {
        if (type === 1) {
          this.$router.push({
            path: '/chat',
            query: {
              name: name
            }
          })
        }
      },
      getData(type){
        if(type==1){
          this.msgList = [
            {
              id: '1',
              name: '聊天测试',
              time: '15:30',
              content: '123',
              msgs: 5,
              msgType: 1,
              ico: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJKpp1HCnDWb1TI4zG7mvIYoHjotHJGdTM7dpkACGfueIfQYIBvnCFHQqLca7l3HFHUQCbNARGqdA/132'
            }
          ]
        }
        else{
          this.msgList = [];
        }
      }
    },
    components: {
      MhHeader,
      TabMenu
    },
    created(){
      this.getData(1)
    }
  }
</script>

<style lang="scss" scoped>
  .mui-segmented-control {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
  }
  .mui-control-item.mui-active span {border-bottom: 0;}
  .unread {
    position: absolute;
    background: #f26c60;
    color: #fff;
    font-size: .9rem;
  }
  .msg-item {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
  }
  .msg-avatar {
    width: 5rem;
    height: 5rem;
    margin-right: .8rem;
    border-radius: 100%;
  }
  .msg-name {
    margin-bottom: .5rem;
    font-size: 1.5rem;
    color: #333;
  }
  .msg-time {margin-bottom: .8rem}
  .adv-badge {
    font-size: .9rem;
    color: #2381fd;
    border: 1px solid #2381fd;
    padding: .1rem .3rem;
  }
</style>
